<template>
  <div class="parent-box">
    <h1>父组件</h1>
    <table class="table">
      <tr>
        <td>
          1.父组件向子组件传值
        </td>
        <td>
          <input type="text" v-model="pcolor">
        </td>
        <td>
          <TongxinChild :pcolor="pcolor" count="123"></TongxinChild>/
        </td>
      </tr>
      <tr>
        <td>
          2.子组件向父组件传值
        </td>
        <td>
          {{msg}} 是子组件传来的
        </td>
        <td>
          <TongxinChild2Emit @receive-msg="handleMsgFromChild"></TongxinChild2Emit>/
        </td>
      </tr>

      <tr>
        <td>
          3.父组件通过$refs获取子组件内的属性值(不推荐使用，仅知晓)
        </td>
        <td>
          ChildrenName:{{ChildrenName}}
        </td>
        <td>
          <TongxinChildRef ref="test" @receive-msg2="handleMsgFromChild2"></TongxinChildRef>/
        </td>
      </tr>
    </table>

  </div>
</template>
<script>
import TongxinChild from "@/views/tongxin/TongxinChild.vue";
import TongxinChild2Emit from "@/views/tongxin/TongxinChild2Emit.vue";
import TongxinChildRef from "@/views/tongxin/TongxinChildRef.vue";

export default {
  name: "TongxinIndex",
  components:{
    TongxinChild,TongxinChild2Emit,TongxinChildRef
  },
  data() {
    return {
      pcolor: "red",
      num: 0,
      msg: '',
      ChildrenName:""
    }
  },
  methods: {
    handleMsgFromChild(msg){
      this.msg = msg;
    },
    handleMsgFromChild2() {
      console.log("$refs", this.$refs)
      let name = ''
      for(let refKey in this.$refs){
        name = this.$refs[refKey].msg;
      }
      this.ChildrenName = name;
    }
  }
}
</script>
<style scoped>
.parent-box {
  border: 2px solid cornflowerblue;
  padding: 2px;
}
</style>
